<template>
	<div>
		<view style="height:100%;padding-bottom: 130rpx;">
			<view class="u-page">
				<ul style="padding:0 30rpx;box-sizing: border-box;">
					<u-radio-group style="display: flex;flex-direction: column;" v-model="radiovalue1" placement="column" @change="groupChange">
						<li style="margin-top: 25rpx;display: flex;align-items: center;" v-for="(itemLi, index) in radiolist1" :key="index">
							<!-- <image style="margin-right:20rpx;width: 60rpx;height: 60rpx;border-radius: 50%;" src="../../../static/img/used.png"
							 mode=""></image>
							<text style="flex: 1;">{{item.bankName}}</text> -->
							<bank-item :bankCode="itemLi.bankCode" :bankName="itemLi.bankName" :cardCode="itemLi.cardNumber"></bank-item>
							<u-radio active-color="#ff6b35" :customStyle="{marginBottom: '8px'}" :label="itemLi.bankName" :name="index"
							 @change="radioChange">
							</u-radio>
						</li>
					</u-radio-group>
				</ul>
			</view>
		</view>
		<view class="button" @click="submit()">
			<div class="settlement">确认支付</div>
		</view>
	</div>
</template>

<script>
	import * as API_CARD from "@/api/card";
	import storage from "@/utils/storage.js";
	import BIN from "bankcardinfo"
	export default {
		data() {
			return {
				radiolist1: [],
				radiovalue1: '0',
				id:"",
				orderSns: "",
				allData:''
			}
		},
		onLoad(option) {
			console.log("card",option)
			this.allData=option.data;
			this.orderSns = option.orderSns
		},
		onShow() {
			this.radiolist1 = [];
			// this.defaultCardMTH();
			this.getCardListMTH()
		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url,
				});
			},
			// 默认列表
			getCardListMTH() {
				uni.showLoading({
					title: "加载中",
				});
				let that = this;
				API_CARD.getCardList().then(res => {
					if (res.data.code == 200) {
						uni.hideLoading()
						that.total = res.data.result.total;
						let dataList = res.data.result.records;
						res.data.result.records.forEach((item, index) => {
							// 6214680080291816
							BIN.getBankBin(item.cardNumber)
								.then(function(data) {
									dataList[index] = Object.assign(dataList[index], data)
									that.radiolist1.push(dataList[index])
									if(index==0){
										that.id=item.id
									}
								})
								.catch(function(err) {
									console.log(err)
								})
						});

					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			// 默认银行卡
			defaultCardMTH() {
				uni.showLoading({
					title: "加载中",
				});
				API_CARD.defaultCardAPI(storage.getUserInfo().id).then(res => {

					if (res.data.code == 200) {
						this.radiovalue1 = res.data.result.id;
						console.log("res", res)
						this.getCardListMTH();
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			groupChange(e) {
				console.log("groupChange", e)
				this.radiovalue1 = e;
				this.id=this.radiolist1[e].id;
			},
			radioChange(e) {
				console.log("radioChange", e)
				this.radiovalue1 = e;
				this.id=this.radiolist1[e].id;
			},
			submit() {
				console.log("&daata=", this.allData)
				uni.navigateTo({
					url: "/pages/cart/payment/cardmessage?id=" + this.id +"&data="+this.allData,
				});
			}
		}
	}
</script>

<style>
	li {
		/* color: #fff; */
		/* height: 240rpx; */
		width: 100%;
		border-radius: 20rpx;
		margin-top: 15rpx;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		/* background-color: #fff; */
	}

	.u-radio {
		position: absolute;
		right: 0;
	}

	.button {
		width: 100%;
		z-index: 999;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		padding: 5px;
		box-sizing: border-box;
		/* height: 130rpx; */

	}

	.settlement {
		width: 80%;
		margin: 0 auto;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		background: #ff6b35;
		/* background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%); */
	}
</style>
